<template>
	<view class="content">
		<view class="box">
			<view class="step-container" v-if="list.orderStatus==2||list.orderStatus==3">
				<view v-for="(attraction, index) in routelist" :key="index" class="step"
					:class="{ active: attraction.status == 1 }">
					<view class="step-circle">{{ index + 1 }}</view>
					<text class="step-name">{{ attraction.attractionName }}</text>
				</view>
			</view>
			<view class="nav">
				<view class="pathTitle">
					{{list.orderTitle}}
				</view>
				<view class="order">
					<view>
						<view v-if="list.needCameraman == 0">
							{{list.cameramanSex =='male_photography' ? '男' : '女' }}{{list.cameramanType =="senior_photographer" ? '高级' :'普通' }}摄影师
							{{list.truingNumber}}张精修{{list.simpleModifyNumber}}张简修
						</view>
						<view v-if="list.needCameraman == 1">
							不包含摄影师
						</view>
					</view>
					<view v-if="list.carType === 'five_seats'">
						五座车
					</view>
					<view v-else-if="list.carType=== 'seven_seats'">
						七座车
					</view>
					<view v-else-if="list.carType=== 'no_package_car'">
						不包车
					</view>
					<view v-else>
						{{list.workPackage.carPackage.name}}
					</view>
					<view>
						{{list.containTickets==0 ?'包含门票':'不包含门票'}}
					</view>
					<view>
						{{list.containStay==0 ?'包含住宿':'不包含住宿'}}
					</view>
					<view>
						{{list.peopleNumber ? list.peopleNumber : 1 }}人套餐
					</view>
				</view>
				<view class="startDate">
					{{list.startDate}}--{{list.endDate}}
				</view>
			</view>
			<view class="back">
				<view>
					<text>订单状态：</text>
					<text v-if="list.orderStatus == '0'">待支付</text>
					<text v-if="list.orderStatus == '1'">未开始</text>
					<text v-if="list.orderStatus == '2'">进行中</text>
					<text v-if="list.orderStatus == '3'">待确认</text>
					<text v-if="list.orderStatus == '4'">已完成</text>
					<text v-if="list.orderStatus == '5'">已取消</text>
				</view>
				<view>
					<text>订单编号：</text>
					<text>{{list.orderNumber}}</text>
				</view>
				<view>
					<text>下单时间：</text>
					<text>{{list.createTime}}</text>
				</view>
				<view>
					<text>订单金额：</text>
					<text>{{list.amount}}元</text>
				</view>
				<view>
					<text>订单金额详情：</text>
					<text>摄影师{{list.cameramanAmount ? list.cameramanAmount :'0' }}+司机{{list.carAmount ? list.carAmount :'0'}}+门票{{list.ticketsAmount? list.ticketsAmount :'0'}}+导游{{list.guideAmount? list.guideAmount :'0'}}+住宿{{list.stayAmount? list.stayAmount :'0'}}+照片{{list.photoAmount? list.photoAmount :'0'}}
						={{list.amount}}</text>
				</view>
				<view class="button">
					<button @click="getRules">查看交易规则</button>
				</view>
			</view>
		</view>
		<view class="image" v-for="(item,index) in routelist" :key="index">
			<view class="title" @click="getphotodetails(item.attractionId,item.orderId)">
				<text></text>
				<text>{{item.attractionName}}的照片</text>
			</view>
			<image @click="getImage(item.orderAttractionImages[0].image)"
				:src="item.orderAttractionImages[0].image ? $u.fileBaseUrl + item.orderAttractionImages[0].image :'../../static/images/index/zwtp.png'"
				mode="aspectFit">
			</image>
			<!-- <image src='../../static/images/index/zwtp.png' mode="aspectFit"></image> -->
		</view>

		<!-- <view class="pace" v-if="list.orderStatus == '0'">
			<button @click="getorderCancel(list.id)">取消订单</button>
			<button @click="goNextStep()">支付{{list.amount}}元</button>
		</view> -->
		<!-- <view class="pace" v-if="list.orderStatus == 1 || list.orderStatus == 0">
			<button @click="getorderCancel(list.id)">退款</button>
		</view>
		<view class="pace" v-if="list.orderStatus == '5'">
			<button @click="deleteOrder(list.id)">删除订单</button>
		</view> -->
		<view class="pace" v-if="list.orderStatus == '2' || list.orderStatus == '3'">
			<button @click="selectPhoto(list)">选择照片</button>
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/DateTimePicker.vue'
	export default {
		data() {
			return {
				from: {},
				list: {},
				reservationDate: '',
				show: false,
				routelist: [],
				current: 1,
				id: 0
			};
		},
		methods: {
			// 预览
			getImage(images) {
				uni.previewImage({
					current: this.$u.fileBaseUrl + images, // 当前显示图片的http链接
					urls: [
						this.$u.fileBaseUrl + images
					] // 需要预览的图片http链接列表
				})
			},
			// 返回上一步
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 步骤条
			calculateCurrentStep() {
				this.current = this.routelist.filter(attraction => attraction.status === 1).length
			},
			// 取消订单
			async getorderCancel(id) {
				// 实现取消订单逻辑
				let res = await this.$u.api.getorderCancel({
					id: id
				})
				if (res.code == 200) {
					this.$u.toast('取消成功')
					uni.navigateBack()
				}
			},
			// 删除订单
			async deleteOrder(id) {
				let that = this
				uni.showModal({
					title: '确认删除？',
					async success(res) {
						if (res.confirm) {
							let res1 = await that.$u.api.getorder({
								id: id
							})
							if (res1.code == 200) {
								that.$u.toast('删除成功')
								that.current = 6
							}
						} else if (res.cancel) {
							that.$u.toast('取消删除')
						}
					}
				})
			},
			// 选择日期
			confirm() {
				this.show = false
			},
			// 已完成获取路线图片路线
			async getorderPathAttraction(id) {
				let res = await this.$u.api.getorderPathAttraction({
					id: id
				})
				if (res.code == 200) {
					this.routelist = res.rows
					this.routelist.forEach((item, index) => {
						if (this.list.carType == "no_package_car") {
							if (item.departStatus == 1) {
								this.current = index
							} else {
								this.current = 0
							}
						} else {
							if (item.departStatus == 1 && item.reachStatus == 1) {
								this.current = index
							} else {
								this.current = 0
							}
						}
					})
					console.log(this.routelist);
				}
			},
			// 支付
			async goNextStep() {
				let that = this
				let res = await that.$u.api.getwxpay({
					orderNumber: that.list.orderNumber
				})
				if (res.code == 200) {
					wx.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageVal,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success(res1) {
							that.$u.toast('支付成功')
							uni.reLaunch({
								url: '/packagesMe/me/myOrder'
							})
						},
						fail(res1) {
							that.$u.toast('支付失败')
							uni.reLaunch({
								url: '/packagesMe/me/myOrder'
							})
						}
					})
				}
			},
			async getorderDetail(id) {
				let res = await this.$u.api.getorderDetail({
					id: id
				})
				if (res.code == 200) {
					this.list = res.data
					if (this.list.orderStatus == '4' || this.list.orderStatus == '2' || this.list.orderStatus == '3') {
						this.getorderPathAttraction(id)
					}
				}
			},
			// 查看交易规则
			getRules() {
				uni.navigateTo({
					url: '/packagesIndex/pages/costCalculation/costCalculation'
				})
			},
			// 跳转到选择照片页面
			selectPhoto(list) {
				uni.navigateTo({
					url: `/packagesMe/me/selectPhoto?id=${list.id}&simpleModifyNumber=${list.simpleModifyNumber}&truingNumber=${list.truingNumber}`
				})
			},
			// 跳转到照片详情
			getphotodetails(attractionId, orderId) {
				uni.navigateTo({
					url: `/packagesMe/me/photodetails?attractionId=${attractionId}&orderId=${orderId}`
				})
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...'
			})
			if (options.id) {
				this.id = options.id
				this.getorderDetail(options.id)
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		onShow() {
			this.calculateCurrentStep()
		},
		components: {
			DateTimePicker
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getorderDetail(this.id)
			if (this.list.orderStatus == '4' || this.list.orderStatus == '2' || this.list.orderStatus == '3') {
				this.getorderPathAttraction(this.id)
			}
			// 模拟异步操作
			setTimeout(() => {
				// 刷新完成后，结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 95vh;
		background: linear-gradient(180deg, #BDD8FD 0%, #FFFFFF 100%);
		padding-top: 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		padding-bottom: 150rpx;
		box-sizing: border-box;


		$primary-color: #4881FC;
		$inactive-color: #ddd;
		$text-color: #333;

		.step-container {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;

			.step {
				flex: 1;
				text-align: center;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 15px;
					left: -50%;
					right: 50%;
					height: 2px;
					background-color: $inactive-color;
					z-index: -1;
				}

				&:first-child::before {
					display: none;
				}

				.step-circle {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background-color: $inactive-color;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 auto 10px;
					color: $text-color;
				}

				.step-name {
					font-size: 12px;
					word-break: break-all;
					color: $text-color;
				}

				&.active {
					.step-circle {
						background-color: $primary-color;
						color: white;
					}
				}
			}
		}

		.uni-section {
			font-size: 28rpx;
			width: 100%;
		}

		.box {
			background-color: #FFFFFF;
			border-radius: 30rpx;
			margin: 0 20rpx;
			padding: 20rpx;
			// height: 902rpx;

			.nav {
				padding-bottom: 20rpx;
				box-sizing: border-box;
				border-bottom: 4rpx solid #F6F6F6;

				.order {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 10rpx 30rpx 20rpx 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;

					view {
						padding-right: 10rpx;
						box-sizing: border-box;
					}
				}

				.startDate {
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;
				}

				.pathTitle {
					width: 100%;
					padding: 10rpx 30rpx;
					box-sizing: border-box;
					font-weight: 700;
					font-size: 32rpx;
					word-wrap: break-word;
					word-break: break-all;
					white-space: normal;
				}
			}

			.back {
				view {
					display: flex;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					justify-content: space-between;
					font-size: 28rpx;
					color: #000000;

					text {
						&:nth-child(2) {
							text-align: right;
							width: 65%;
							display: block;
						}
					}
				}

				.default {
					font-size: 20rpx;
					color: #FB3D3B;
					padding: 0 30rpx;
					box-sizing: border-box;
				}

				.button {
					display: flex;
					justify-content: flex-end;

					button {
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 2rpx solid rgba(217, 217, 217, 0.5);
						background-color: #FFFFFF;
						padding: 20rpx 20rpx;
					}
				}
			}
		}

		.image {
			background-color: #FFFFFF;
			margin: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.title {
				display: flex;
				align-items: center;
				margin: 30rpx;

				text {
					font-weight: 600;
					font-size: 32rpx;

					&:nth-child(1) {
						width: 10rpx;
						height: 30rpx;
						display: block;
						background-color: $overall-color;
						margin-right: 15rpx;
					}
				}
			}

			image {
				width: 100%;
			}
		}

		.pace {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #ffffff;
			padding: 20rpx 20rpx 50rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0rpx;

			button {
				flex: 1;

				&:nth-child(1) {
					color: #000000;
					background-color: #fff;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
					border: 1rpx solid #ccc;
				}

				&:nth-child(2) {
					color: #ffffff;
					background-color: $overall-color;
					text-align: center;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					// margin-right: 20rpx;
				}
			}
		}
	}
</style>